<template>
<!--头部-->
  <div>
		  <el-row >
			  <button @click="str">点击</button>
	  <el-col :span="3" :xs="3"><el-link  id="sy">我的订单</el-link></el-col>
	  <el-col :span="3" :xs="3"><el-dropdown placement="bottom">
		  <el-link>我的服务 <i class="el-icon-arrow-down"></i></el-link>
		<el-dropdown-menu>
			<el-dropdown-item><el-link>订单 <i class="el-icon-s-shop"></i></el-link>
			<el-badge :value="0"><el-link> 消息 <i class="el-icon-s-comment"></i></el-link></el-badge>
			</el-dropdown-item>
		</el-dropdown-menu>
	  </el-dropdown></el-col>
	  <el-col :span="3" :xs="3"><el-link>大会员</el-link></el-col>
	  <el-col :span="3" :xs="3"><el-link>企业采购</el-link></el-col>
	  <el-col :span="3" :xs="3">
		  <el-dropdown placement="bottom">
			  <el-link>客户服务  <i class="el-icon-arrow-down"></i></el-link>
			<el-dropdown-menu>
				<el-dropdown-item>
					<el-link>电话<i class="el-icon-phone"></i></el-link>
				</el-dropdown-item>
			</el-dropdown-menu>
		  </el-dropdown>
	  </el-col>
	  <el-col :span="3" :xs="3"><el-link>网站导航  <i class="el-icon-arrow-down"></i></el-link></el-col>
	   <el-col :span="3" :xs="3"><el-link>用户<i class="el-icon-user"></i>{{admin}}</el-link></el-col>
  </el-row>	

			<el-row>
			  <el-col :span="4" :xs="4"><el-image src="/static/img/beij.jpg"></el-image></el-col>
			  <el-col :span="15"  :xs="24">		
			<el-row>
				<el-row>
				  <el-col :span="24" :xs="24">
					  <el-autocomplete style="width:80%;margin-top:10px;"
      class="inline-input"
      v-model="form.sou"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
	  >
	<el-select v-model="xz" placeholder="请选择" slot="prepend" @change="it">
<el-option
v-for="q in item"
:key="q.label"
:label="q.label"
:value="q.value">
</el-option>
	</el-select>
	<el-button type="info" slot="append" class="el-icon-search"></el-button>
	</el-autocomplete>
	<el-button type="primary" class="el-icon-shopping-cart-full">购物车</el-button>	
				  </el-col>
				</el-row>
			  <el-col :span="24"  :xs="24">	
					   <el-breadcrumb separator="|" style="text-align:center;padding-left:15%;margin-top:10px;margin-bottom:10px;">
					   <el-breadcrumb-item>限时秒</el-breadcrumb-item>
					   <el-breadcrumb-item>食品饮料</el-breadcrumb-item>
					   <el-breadcrumb-item>限时7折</el-breadcrumb-item>
					   <el-breadcrumb-item>运动秒杀</el-breadcrumb-item>   
					   <el-breadcrumb-item>五周年庆</el-breadcrumb-item>    
					   <el-breadcrumb-item>电视秒杀</el-breadcrumb-item>  
					   </el-breadcrumb>	
				 <el-row>
				   <el-col :span="4" :xs="3">
					   <el-tag type="warning">优惠</el-tag>
				   </el-col>
				    <el-col :span="4" :xs="3">
					   <el-tag type="warning">秒杀</el-tag>
				   </el-col>
				    <el-col :span="4" :xs="5">
					   <el-tag type="primary">plus会员</el-tag>
				   </el-col>
				    <el-col :span="4" :xs="5">
					    <el-tag type="info">品牌闪购</el-tag>
				   </el-col>
				    <el-col :span="4" :xs="4">
					    <el-tag type="success">拍卖</el-tag>
				   </el-col>
				    <el-col :span="4" :xs="4"> 
						 <el-tag type="success">家电</el-tag>
				   </el-col>
		
				 </el-row>
			  </el-col>
			</el-row>
			  </el-col>
			    <el-col :span="4" :xs="4"><el-image src="/static/img/beij.jpg"></el-image></el-col>
			</el-row>	
  <el-row>
	<el-col :span="4" :xs="24">
		<el-row>
		  <el-col :span="24">
			  <ul>
		<li >
				<a  href="//jiadian.jd.com">家用电器</a>                                                                                   
							<a>手机</a>                                                                        
							<a >运营商</a>                                                                          
							<a >数码</a>																		
							<a >电脑</a>
							<a>办公</a>
        </li>                                    
                                            </ul>
		  </el-col>
		</el-row>
	</el-col>
	<el-col :span="16" :xs="24">
		<el-row>
		  <el-col :span="18" :xs="24">
			  <el-image src="/static/img/cp.jpg" style="height:300px;"></el-image>
		  </el-col>
		   <el-col :span="5"  :xs="24">
			   <el-row>
				 <el-col :span="24" :xs="8">
					 <el-image src="/static/img/cp.jpg"></el-image>
				 </el-col>
				 <el-col :span="24" :xs="8">
					 <el-image src="/static/img/cp5.jpg"></el-image>
				 </el-col>
				 <el-col :span="24" :xs="8">
					 <el-image src="/static/img/cp6.jpg"></el-image>
				 </el-col>
			   </el-row>
		   </el-col>
		</el-row>
	</el-col>
	<el-col :span="4" :xs="24">
		<el-row>
		  <el-col :span="20"  :xs="24">
			 <el-row>
			   <el-col :span="8" :xs="8"><el-image src="/static/img/cp6.jpg" style="margin-top:3px;"></el-image></el-col>
			  <el-col :span="16" :xs="16">
				  <span>欢迎使用</span> <br>
						<router-link to="/deng">登录</router-link>
						<router-link to="/zhu">注册</router-link>			
			  </el-col>
			 </el-row>
			  
			  <el-row>
				<el-col :span="24" :xs="8">
					<el-button type="primary" plain>新人福利</el-button>
				</el-col>
				<el-col :span="24"  :xs="8">
					<el-button type="warning" plain>plus会员</el-button>
				</el-col>
			  </el-row>
			  <el-divider></el-divider>
			  <el-row>
				<el-col :span="12" :xs="12"><strong>京东快报</strong></el-col>
				<el-col :span="6" :push="6"  :xs="6"><p>更多 ></p></el-col>
				
			  </el-row>
			  <el-row>
				<el-col :span="24" :xs="24"><span><el-tag type="warning">HOT</el-tag>钓鱼技术学习</span></el-col>
				<el-col :span="24" :xs="24"><span><el-tag type="warning">热评</el-tag>多功能家用按摩</span></el-col>
				<el-col :span="24" :xs="24"><span><el-tag type="warning">热议</el-tag>纸尿裤多久更换</span></el-col>
				<el-col :span="24" :xs="24"><span><el-tag type="warning">热评</el-tag>实时录音转文字</span></el-col>
			  </el-row>
			  <el-row>
				<el-col :span="24" :xs="24">
					<el-tabs  value="first" style="font-Size:11px;">
					  <el-tab-pane label="话费" name="first" >
						  <span :a="1" data-set='jx' @mouseenter="show" @mouseleave="color">话费充值</span> 
						  <span :b="2" data-set='2' @mouseenter="show" @mouseleave="color">流量充值</span> 
						  <span :c="3" data-set='3' @mouseenter="show" @mouseleave="color">套餐变更</span>
						  <el-row v-if="index==1">
							<el-col :span="24" :xs="24">1</el-col>
						  </el-row>
						  <el-row v-if="index==2">
							<el-col :span="24" :xs="24">2</el-col>
						  </el-row>
						  <el-row v-if="index==3">
							<el-col :span="24" :xs="24">3</el-col>
						  </el-row>
					  </el-tab-pane>
					  <el-tab-pane label="机票" name="second">机票</el-tab-pane>
					  <el-tab-pane label="酒店" name="thred">酒店</el-tab-pane>
					</el-tabs>
				</el-col>
			  </el-row>
		  </el-col>
		</el-row>
	</el-col>
  </el-row>
  <el-row>
	<el-col :span="4" :xs="24"><el-tag type="warning" id="ms">限时秒杀</el-tag><br>
		{{time}}
	</el-col>
	<el-col :span="4" :xs="24">
		<el-row>
		  <el-col :span="20"  :xs="24">
			  <el-image src="/static/img/fw.jpg" style="height:150px;"></el-image>
			  <span>好看</span>
		  </el-col>
		</el-row>
	</el-col>
	<el-col :span="4" :xs="8">
		<el-row>
		  <el-col :span="20"  :xs="24">
			  <el-image src="/static/img/hf.jpg" style="height:150px;"></el-image>
			  <span>好看</span>
		  </el-col>
		</el-row>
	</el-col>
	<el-col :span="4" :xs="8">
		<el-row>
		  <el-col :span="20"  :xs="24">
			  <el-image src="/static/img/jd.jpg" style="height:150px;"></el-image>
			  <span>好看</span>
		  </el-col>
		</el-row>
	</el-col>
	<el-col :span="4" :xs="8">
		<el-row>
		  <el-col :span="20"  :xs="24">
			  <el-image src="/static/img/yc.jpg" style="height:150px;"></el-image>
			  <span>好看</span>
		  </el-col>
		</el-row>
	</el-col>
	<el-col :span="4" :xs="24">
		<el-carousel height="150px"  trigger="hover" setActiveName="car">
		  <el-carousel-item name="a" label="d">
			  <el-image src="/static/img/lx.jpg" style="height:150px;"></el-image>
		  </el-carousel-item>
		  <el-carousel-item name="b" label="e" >
			  <el-image src="/static/img/cx.jpg" style="height:150px;"></el-image>
		  </el-carousel-item>
		</el-carousel>
	</el-col>
  </el-row>

  <el-row>
	<el-col :span="12" :xs="24">
		<el-row>
		  <el-col :span="12" :xs="24">
			  <strong id="mr"> 每日特价<span class="el-icon-arrow-right"></span></strong>
		</el-col>
		<el-col :span="12" :xs="24">
			 <el-breadcrumb separator=" ">
			<el-breadcrumb-item ><span data-set='jx' @mouseenter="showt" @mouseleave="colort">精选</span></el-breadcrumb-item>
			<el-breadcrumb-item ><span data-set='sm' @mouseenter="showt" @mouseleave="colort">数码</span></el-breadcrumb-item>
			<el-breadcrumb-item ><span data-set='ms' @mouseenter="showt" @mouseleave="colort">美食</span></el-breadcrumb-item>
			<el-breadcrumb-item ><span data-set='bh' @mouseenter="showt" @mouseleave="colort">百货</span></el-breadcrumb-item>
			<el-breadcrumb-item ><span data-set='yg' @mouseenter="showt" @mouseleave="colort">预告</span></el-breadcrumb-item>
			 </el-breadcrumb>
		  </el-col>
		</el-row>

		
		
		
		
	</el-col>

	<el-col :span="12" :xs="24">
	
	</el-col>
  </el-row>
  
  <el-row>
	
  </el-row>
  <el-backtop :visibility-height="he">
	  <el-dropdown placement="top">
		  <span class="el-icon-arrow-up"></span>
		<el-dropdown-menu>
			<el-dropdown-item><el-link href="#sy">首页</el-link></el-dropdown-item>
			<el-dropdown-item><el-link href="#mr">每日特价</el-link></el-dropdown-item>
			<el-dropdown-item><el-link href="#ms">限时秒杀</el-link></el-dropdown-item>
		</el-dropdown-menu>
	  </el-dropdown>
  </el-backtop>

	
  </div>
<!--颈部-->
	

</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
	props:{
		a:{
			type:String
		},
		b:{
			type:String
		},
		c:{
			type:String
		}
	},
	mounted(){
		this.admin=this.$route.params.name
	},
	data(){
		return {
			admin:"",
			st:"a",
			he:20,
			url:"/static/fz/",
			list:[{index:'4',name:"dx1.jpg"},{index:'5',name:"dx2.jpg"},{index:'6',name:"dxnv2.jpg"},{index:'7',name:"dx3.jpg"}],
			img:[
				{index:'0',name:"ck1.jpg"},{index:'1',name:"ck2.jpg"},{index:'2',name:"ck3.jpg"},{index:'3',name:"dxnv3.jpg"}
			],
			goods:"jx",
			time:new Date().toLocaleString(),
			car:"a",
			index:1,
			tabs:"first",
			user:"/static/img/cx.jpg",
			form:{
				sou:""
			},
			msg:"",
			tu:"@/static/img/beij.jpg",
			t:"",
			fz:"my",
			sel:"",
			x:"",
			xz:"",
			
			item:[
				{
					label:"旗袍",
					value:"旗袍"
				},
				{
					label:"长裤",
					value:"长裤"
				},
				{
					label:"毛衣",
					value:"毛衣"
				},
				{
					label:"短袖",
					value:"短袖"
				}

			]
		}
	},
	created(){
		let n=-1
		this.t=setInterval((x) => {
			n=n+1
			if(n==this.list.length){
				n=0
			}
			this.img.shift();
			this.img.push(this.list[n])
			
			//console.log(s)
			//console.log(this.img)
		}, 4000);
		this.$store.dispatch("search")			
	},
	destroyed(){
		clearInterval(this.t);
		
	},
	methods:{
		str:function(){
				this.$store.dispatch("hel")
		},
		it:function(value){
				this.form.sou=value
		},
		handleSelect(value){
			console.log(value)
		},
		querySearch(query,cd){
			console.log(123)
					
					
				
				const text=this.$store.state.text
					
					 var results = query ?text.filter((restaurant) => {//过滤函数变量数组类数字返回操作值
          if(restaurant.value.indexOf(query)===0){//类数组里面必须要有一个value自定义属性才能获取变量
			return restaurant//在生命周期created加载的时候是先数据然后再是方法
			//
          }//类数组过滤索引内容把符合条件的索引留下
         // console.log(restaurant)
         // return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
        }) : text;
        // 调用 callback 返回建议列表的数据
        
        cd(results)//返回对象js里面数组是对象数据类型是object
			//生命周期
		},
		sou:function(){
			this.$store.state.search=this.form.sou
			
		},
		push(){
			this.$router.push({
				name:"deng"
			})
		},
		get:function(){
			const admin={
				params:{//get提交
					user:"liu",
				pass:"yong"
				}
			}
			const header={
				headers:{"Content-Type":"application/json"}
			}
			axios.get("http://localhost:8081/",admin,header).then(response=>{this.msg=response.data}).catch((err)=>{console.log(err)})
		},
		post:function(){
			const admin={
				user:"liu",
				pass:"yong"
			}
			const header={
				headers:{
					"Content-Type":"application/x-www-form-urlencoded"
				}
			}
			axios.post("http://localhost:8081/",qs.stringify(admin),header).then(response=>{this.msg=response.data}).catch((err)=>{console.log(err)})
		},
		del:function(){

		},
		put:function(){

		},
		show:function(e){
			console.log(e)
			this.index=e.target.dataset.set;
			
			e.target.style.color="red"
		},
		color:function(e){
			e.target.style.color="black"
		},
		showt:function(e){
			console.log(e)
			this.goods=e.target.dataset.set;
			
			e.target.style.color="red"
		},
		colort:function(e){
			e.target.style.color="black"
		},
		fza:function(e){
			this.fz=e.target.dataset.fz
			e.target.style.color="salmon"
		},
		fzb:function(e){
			e.target.style.color="skyblue"
		}

	}
}
</script>

